<template>
	<view class="course-list">
		<view class="list-item" v-for="item in courseList" :key="item.id">
			<image class="item-img" :src="item.cover" mode=""></image>
			<view class="item-info">
				<view class="info-title">{{item.title}}</view>
				<view class="info-sale">
					<text class="sale-price">￥ {{item.price}}</text>
					<text class="sale-count">{{item.buyCount}}人购买</text>
				</view>
			</view>
		</view>
		<view class="more" style="text-align: center;" v-show="isShow">
			没有更多的了
		</view>
	</view>
</template>

<script lang="ts" setup>
	import reqCourse from '@/api/course'
	import { onLoad, onReachBottom } from '@dcloudio/uni-app';
	import { reactive, ref } from 'vue'
	//课程列表请求参数
	const params = reactive({
		page: 1,
		limit: 10
	})
	//定义课程列表数据
	const courseList = ref<any>([])
	//定义总页码
	let pages = ref(0)
	//控制显示没有更多
	let isShow = ref(false)
	//发送请求获取课程列表数据
	const getCourseList = async () => {
		const result = await reqCourse.getCourseData(params) as any
		// console.log(result)
		if (result.code === 200) {
			courseList.value.push(...result.data.items)
			pages.value = result.data.pages
		}
	}
	onLoad(() => {
		//获取课程列表数据
		getCourseList()
	})

	//上拉加载更多
	onReachBottom(() => {
		params.page++
		if (params.page > pages.value) {
			isShow.value = true
		} else {
			getCourseList()
		}
	})
</script>

<style lang="less">
	.course-list {
		background-color: #eee;
		// height: 100%;

		.list-item {
			padding: 20upx;
			display: flex;
			background-color: #fff;
			margin-bottom: 20upx;

			.item-img {
				width: 228upx;
				width: 226upx;
				height: 128upx;
				margin-right: 20upx;
			}

			.item-info {
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.info-title {
					font-size: 24upx;
				}

				.info-sale {
					.sale-price {
						font-size: 32rpx;
						color: #e53935;
					}

					.sale-count {
						font-size: 24rpx;
						color: #666;
						margin-left: 20rpx;
					}
				}
			}
		}

		.more {
			height: 100upx;
			line-height: 100upx;
			text-align: center;
			background-color: #eee;
			font-size: 28upx;
			color: #00cc99;
		}
	}
</style>